<!-- 合同金额环图 -->
<template>
  <div style="position: relative; width: 100%; height: 100%;">
    <div id="ht-money-circle" style="position: relative; width: 100%; height: 100%; left:-80px"></div>
    <el-popover placement="left" trigger="hover" :content="'查看全部业务类型'">
      <template #reference>
        <el-button v-if="isShowButton" class="detail-button" @click="getDetail" circle size="mini" style="left: 300px">
          <el-icon>
            <View />
          </el-icon>
        </el-button>
      </template>
    </el-popover>
    <el-dialog v-model="isShowDialog" @close="closeDialog" title="数据详情" width="500" draggable>
      <div style="width: 100%;">
        <el-table :data="props.data" style="width: 100%">
          <el-table-column prop="name" label="业务类型"></el-table-column>
          <el-table-column prop="value" label="金额（万元）"></el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, watch, ref } from "vue";
import * as echarts from 'echarts';
import { View } from "@element-plus/icons-vue";
import { storeToRefs } from 'pinia';
import { useScreenStore } from '@/store/useScreenStore';

const props = defineProps({
  data: { type: Array, default: () => [] },
  scbk: { type: String, default: '' }
});

const isShowButton = ref(false);
const buttonType = ref('all'); // top10, all
const isShowDialog = ref(false);



const option = reactive({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: '70%',
    top: 'center',
    itemWidth: 8,
    itemHeight: 8,
    itemGap: 15,
    textStyle: {
      fontSize: 16,
    },
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['48%', '50%'],
      avoidLabelOverlap: false,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' 万元';
        }
      },
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
      ]
    }
  ]
});

let mychart = null;
const store = useScreenStore();
const { topn } = storeToRefs(store);

const getDetail = () => {
  if (buttonType.value === 'all') {
    buttonType.value = 'top' + topn.value;
    isShowDialog.value = true;
  } else {
    buttonType.value = 'all';
    isShowDialog.value = false;
  }

}

const closeDialog = () => {
  isShowDialog.value = false;
  option.series[0].data = props.data.slice(0, topn.value);
  buttonType.value = 'all';
  mychart.setOption(option, true);
}

watch(() => props, () => {
  // console.log(topn.value);
  option.series[0].name = props.scbk;
  if (props.data.length > topn.value) {
    isShowButton.value = true;
    option.series[0].data = props.data.slice(0, topn.value);
  } else {
    isShowButton.value = false;
    option.series[0].data = props.data;
  }
  mychart.setOption(option, true);
}, { deep: true })

onMounted(() => {
  mychart = echarts.init(document.getElementById("ht-money-circle"));
  mychart.setOption(option);
});
</script>

<style scoped>
.detail-button {
  position: absolute;
  bottom: 10px;
  right: 100px;
  z-index: 999;
}
</style>
